<template>
  <div class="recruit">




    <div class="recruit-container">

      <div class="enter">

        <div class="enter-hd">

          <div>
            <h2>查看审核记录</h2>
            <div class="steps">
              <div class="steps-icon"><img
                  src=""
                  alt="">
                查询
              </div>
              <div class="steps-arrow"><img
                  src=""
                  alt=""></div>
              <div class="steps-icon"><img
                  src="//shadow.elemecdn.com/faas/daili-recruit-gray/static/img/examine.19616be.png" alt="">
                提交数据
              </div>
              <div class="steps-arrow"><img
                  src=""
                  alt=""></div>
              <div class="steps-icon"><img
                  src=""
                  alt="">
                等待结果
              </div>
            </div>
          </div>
        </div>

        <!-- 注册列表 -->
        <div class="enter-register">

          <el-form :model="form" :rules="rules" ref="form" label-width="140px">

            <div style="width: 640px; margin: 0 auto;" v-show="step===1">
              <el-form-item label="联系人手机号" prop="loginName">
                <el-input v-model="form.loginName"></el-input>
              </el-form-item>

              <el-form-item label="登录密码" prop="loginPwd">
                <el-input v-model="form.loginPwd"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" :disabled="loginDisabled" @click="btnNext">查询</el-button>
              </el-form-item>

            </div>

            <div v-show="step===2">
              <el-row>
                <el-col :span="10">

                  <div class="block">
                    <el-timeline>
                      <el-timeline-item :timestamp="processName(item)" v-for=" item  in processList" v-bind:key="item.id"
                        :type="processStyle(item)" placement="top">
                        <el-card v-if="item.status===1">
                          <p> 申请时间 {{item.createTime}}</p>
                          <h4>{{item.description}}</h4>
                        </el-card>

                        <el-card v-else>
                          <p> 审核时间 {{item.createTime}}</p>
                          <h4>{{item.description}}</h4>
                        </el-card>

                      </el-timeline-item>
                    </el-timeline>
                  </div>

                </el-col>

                <el-col :span="14">

                       <el-form-item label="商家名称:" >
                           {{ form.name }}
                       </el-form-item>


                       <el-form-item label="联系电话" key="phone" prop="phone" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                         <el-input v-model="form.phone" placeholder="联系电话" />
                       </el-form-item>



                       <el-form-item label="配送半径" key="radius" prop="radius" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                         <el-input v-model.number="form.radius" placeholder="配送半径" />
                       </el-form-item>

                 <el-row>
                   <el-col :span="12">
                     <el-form-item label="商家图片" prop="picture" v-if="form.status==='2'">
                       <el-upload
                         class="avatar-uploader"
                         :action="publicImageUploadUrl"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess1"
                         :before-upload="beforeAvatarUpload">
                         <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                       </el-upload>

                       <div style="display:none;">
                         <el-input v-model="form.picture" />
                       </div>
                     </el-form-item>

                     <el-form-item label="商家图片"   v-if="form.status!=='2'">
                       <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                     </el-form-item>

                   </el-col>
                   <el-col :span="12">
                     <el-form-item label="营业执照" prop="bussinessLicense" v-if="form.status==='2'">
                        <el-upload
                          class="avatar-uploader"
                          :action="privateImageUploadUrl"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess4"
                          :before-upload="beforeAvatarUpload">
                          <img v-if="bussinessLicenseBlob" width="350" :src="bussinessLicenseBlob" class="avatar">
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                        <div style="display:none;">
                           <el-input   v-model="form.bussinessLicense"  />
                         </div>
                      </el-form-item>

                      <el-form-item label="营业执照"   v-if="form.status!=='2'">
                         <el-image   :src="form.bussinessLicenseUrl" :preview-src-list="[form.bussinessLicenseUrl]"  style="width:200px;height: 150px"></el-image>
                      </el-form-item>
                   </el-col>
                </el-row>


                  <el-row>
                    <el-col :span="12">
                       <el-form-item label="身份正面" prop="idcardFront"  v-if="form.status==='2'">
                          <el-upload
                            class="avatar-uploader"
                            :action="privateImageUploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="idcardFrontBlob" width="350" :src="idcardFrontBlob" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>

                          <div style="display:none;">
                             <el-input   v-model="form.idcardFront"  />
                           </div>
                        </el-form-item>

                        <el-form-item label="身份正面"  v-if="form.status!=='2'">
                          <el-image   :src="form.idcardFrontUrl" :preview-src-list="[form.idcardFrontUrl]"  style="width:200px;height: 150px"></el-image>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="身份背面" prop="idcardBack" v-if="form.status==='2'">
                          <el-upload
                            class="avatar-uploader"
                            :action="privateImageUploadUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess3"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="idcardBackBlob" width="350" :src="idcardBackBlob" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                          </el-upload>

                          <div style="display:none;">
                             <el-input   v-model="form.idcardBack"  />
                           </div>
                        </el-form-item>

                      <el-form-item label="身份背面"   v-if="form.status!=='2'">
                        <el-image   :src="form.idcardBackUrl" :preview-src-list="[form.idcardBackUrl]"  style="width:200px;height: 150px"></el-image>
                      </el-form-item>
                    </el-col>

                  </el-row>

                  <el-form-item label="地图位置" key="longitude" prop="longitude" style="text-align:left;" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">

                    <search  :item="form" @myclick="mapAddressCallback"></search>

                    <div style="display:none;">
                      <el-input v-model="form.longitude" />
                    </div>
                  </el-form-item>


                  <el-form-item v-if="form.status===2">
                    <el-button type="primary" @click="btnSave">提交信息</el-button>
                  </el-form-item>

                </el-col>
              </el-row>

            </div>

            <div v-show="step===3">
              <el-result icon="success" title="申请信息已发送" subTitle="请耐心等待审核结果,会以短信通您.">
              </el-result>
            </div>


          </el-form>

        </div>

      </div>

    </div>

  </div>
</template>

<script>
   import {    isPhone  } from '@/utils/validate.js'
  // import {    shopResubmitRegisterApi,    processHistoryApi  } from '@/api/front.js'
  import search from  '@/components/BaiduMap/search.vue'
  import display from '@/components/BaiduMap/display.vue'

  export default {
    // 挂载地图级组件
    components: {
      search,
      display
    },
    data() {
      // 验证密码是否相同
      var pwdConfirmFunction = (rule, value, callback) => {
        if (value === this.form.loginPwd) {
          callback()
        } else {
          callback(new Error('两次输入的密码不一致'));
        }
      }

      return {
        //公有桶上传地址
         publicImageUploadUrl: process.env.VUE_APP_BASE_API+'/anony/tencent/image/upload',
         privateImageUploadUrl: process.env.VUE_APP_BASE_API+'/anony/tencent/private/image/upload',
        // 百度地图
        mapShow: false,
        // 当前步骤
        step: 1,
        // 是否同意
        dialogVisible: false,
        // 发送短信按钮是否禁用(true禁用，false启用 )
        btnSendVisable: true,
        //本地回显示图片
        idcardFrontBlob: undefined,
        idcardBackBlob: undefined,
        bussinessLicenseBlob: undefined,
        form: {
          picture: undefined,
          address: undefined,
          latitude: undefined,
          longitude: undefined,
          status: 2,
          loginName: undefined,
          //身份证正面
          idcardFront: undefined,
           //身份证反面
          idcardBack: undefined,
          //营业执照
          bussinessLicense: undefined,
        },
        //审核的历史记录
        processList: [],
        rules: {
          loginName: [{
            required: true,
            message: '该值不能为空',
            trigger: 'blur'
          }],
          loginPwd: [{
            required: true,
            message: '该值不能为空',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '该值不能为空',
            trigger: 'blur'
          }],
          phone: [{
              required: true,
              message: '该值不能为空',
              trigger: 'blur'
            },

          ],
          address: [{
            required: true,
            message: '该值不能为空',
            trigger: 'blur'
          }],
          longitude: [{
            required: true,
            message: '该值不能为空',
            trigger: 'blur'
          }],
          album: [{
            required: true,
            message: '该值不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {

      // 地图位置注册事件
      handlerLocation(resp) {

        this.form.address = resp.address
        this.form.longitude = resp.longitude
        this.form.latitude = resp.latitude
        this.mapShow = false
      },
      // 图片上传成功以后返回的数据(json, file[blob]数据)  公共桶
       handleAvatarSuccess1(res, file) {
         this.form.picture=  res.data.image_url
       },
       //身份证正面
       handleAvatarSuccess2(res, file) {
         this.idcardFrontBlob=URL.createObjectURL(file.raw)
         this.form.idcardFront = res.data.file_name
         this.form.idcardFrontUuid = res.data.uuid
       },
       //身份证背面
       handleAvatarSuccess3(res, file) {
         this.idcardBackBlob=URL.createObjectURL(file.raw)
         this.form.idcardBack = res.data.file_name
         this.form.idcardBackUuid = res.data.uuid
       },
       //营业执照
       handleAvatarSuccess4(res, file) {
        this.bussinessLicenseBlob=URL.createObjectURL(file.raw)
        this.form.bussinessLicense = res.data.file_name
        this.form.bussinessLicenseUuid = res.data.uuid
       },
      // 图片上传之前验证
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt1M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!');
        }
        if (!isLt1M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt1M;
      },
      // 根据手机查询数据
      btnNext() {
        // 验证输入的验证码是否正确
        console.log(this.form.loginName)
        // processHistoryApi(this.form.loginName).then(resp => {
        //   this.form = resp.data.merchandiser
        //   this.processList = resp.data.enterpriseProcessList
        //   // 正确(进入到录入商家信息页面)
        //   this.step = 2
        // })
      },
      // 提交保存商家信息
      btnSave() {
        // 验证数据有效性
        this.$refs["form"].validate(valid => {
          if (valid) {
            // 保存
            // shopResubmitRegisterApi(this.form).then(resp => {
            //   this.step = 3
            // })
          }

        })

      },
      //百度地图选择地址后的回调
      mapAddressCallback(data){
        console.log(data)
        this.form.address=data.address
        this.form.latitude =data.latitude
        this.form.longitude =data.longitude
      },
      handleChange(value) {
        console.log(value)
      },
      //审核状态对应的样式
      processStyle(row) {
        if (row.status === 1) {
          return 'primary'
        } else if (row.status === 2) {
          return 'danger'
        } else {
          return 'success'
        }
      },
      processName(row) {
        if (row.status === 1) {
          return '审核中'
        } else if (row.status === 2) {
          return '审核不通过'
        } else {
          return '审核通过'
        }
      }
    },
    computed: {
      // 登录按钮是否禁用
      loginDisabled() {
        // 如果不为空
        if (this.form.loginName) {
          // 再验证手机号码格式是否正确，如果正确
          if (isPhone(this.form.loginName)) {
            return false
          } else {
            // 格式不正确
            return true
          }
        }
        return true
      }

    },
    watch: {
      'form.loginName'(newValue, oldValue) {
        if (newValue && isPhone(newValue)) {
          this.btnSendVisable = false
        } else {
          this.btnSendVisable = true
        }
      }
    },
    created() {

    }

  }
</script>

<style scoped lang="scss">
  .recruit-header {
    background: #009bff;
    background: -webkit-gradient(linear, left top, right top, from(#00adff), to(#0082ff));
    background: linear-gradient(90deg, #00adff, #0082ff);
  }


  .recruit-container {
    width: 1024px;
    margin: 0 auto;
  }


  .enter {
    padding: 16px 16px 0;
    background: #fff;
    max-width: 940px;
    margin: 0 auto;
  }

  .recruit-container>div {
    min-height: calc(100vh - 200px);
  }

  .enter-hd {
    text-align: center;
  }

  .desc {
    text-align: left;
    background: #f5f7fa;
    border-radius: 6px;
    font-size: 13px;
    line-height: 22px;
    color: #909399;
    padding: 15px;
    margin-bottom: 32px;
  }

  .kw-breadcrumb-item,
  .kw-btn,
  .kw-checkbox .kw-checkbox-appearance,
  .kw-link,
  .kw-modal,
  .kw-pager li,
  .kw-pagination-size,
  .kw-pagination-total,
  .kw-radio .kw-radio-appearance,
  .kw-tooltip {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .kw-btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    font-weight: 500;
    text-decoration: none;
    vertical-align: middle;
  }


  .kw-btn.btn-large {
    height: 40px;
    line-height: 38px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
  }

  .kw-btn.btn-text {
    color: #606266;
    background-color: transparent;
    padding: 0;
    border: none;
    position: relative;
    background: none;
  }

  .desc .kw-btn {
    color: #606266;
    height: 22px;
    line-height: 22px;
    vertical-align: baseline;
  }

  .enter-hd h2 {
    color: #303133;
    font-size: 18px;
    font-weight: 400;
  }

  .steps {
    padding: 30px 0 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    font-size: 14px;
    color: #606266;
    border-bottom: 1px solid #e4e7ed;
  }

  .steps-icon {
    width: 64px;
  }


  .steps-icon img {
    width: 100%;
    margin-bottom: 10px;
  }

  .steps-arrow {
    padding-top: 14px;
  }

  .enter-register {
    padding: 25px 0;
    text-align: center;
  }

  .apply-detail-item {
    padding: 12px 0;
  }

  .apply-detail-item:first-child {
    border-bottom: 1px solid #e4e7ed;
  }

  .apply-detail h2 {
    font-size: 16px;
    color: #303133;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 10px;
  }

  .apply-detail ul {
    padding: 0;
    list-style: none;
  }

  .apply-detail-item ul li {
    font-size: 14px;
    color: #606266;
    padding-left: 20px;
    line-height: 24px;
    position: relative;
  }

  .apply-detail-item ul li:after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c0c4cc;
    left: 0;
    top: 9px;
  }

  .apply-detail-item {
    padding: 12px 0;
  }

  .apply-detail h2 {
    font-size: 16px;
    color: #303133;
    line-height: 16px;
    font-weight: 400;
    margin-bottom: 10px;
  }

  .enter-register {
    padding: 25px 0;
    text-align: center;
  }

  .enter-register .mix-input-btn {
    background: #fff;
    font-size: 12px;
    position: absolute;
    right: 2px;
    top: 10px;
    color: #303133;
    font-weight: 500;
    height: 20px;
    line-height: 20px;
    padding: 0 15px;
    border-left: 1px solid #dcdfe6;
    cursor: pointer;
  }

  .enter-register .mix-input-btn .el-link:after {
    border-color: transparent;
  }
</style>
